@import "../var/color.styl"

// action-sheet
$action-sheet-color = $color-grey
$action-sheet-active-color = $color-orange
$action-sheet-bgc = $color-white
$action-sheet-active-bgc = $color-light-grey-opacity
$action-sheet-title-color = $color-dark-grey
/// picker style
$action-sheet-picker-cancel-color = $color-light-grey
$action-sheet-picker-cancel-active-color = $color-light-grey-s

// bubble

// button
$btn-color = $color-white
$btn-bgc = $color-regular-blue
$btn-bdc = $color-regular-blue
$btn-active-bgc = $color-blue
$btn-active-bdc = $color-blue
$btn-disabled-color = $color-white
$btn-disabled-bgc = $color-light-grey-s
$btn-disabled-bdc = $color-light-grey-s
/// primary
$btn-primary-color = $color-white
$btn-primary-bgc = $color-orange
$btn-primary-bdc = $color-orange
$btn-primary-active-bgc = $color-dark-orange
$btn-primary-active-bdc = $color-dark-orange
/// light
$btn-light-color = $color-grey
$btn-light-bgc = $color-light-grey-sss
$btn-light-bdc = $color-light-grey-sss
$btn-light-active-bgc = $color-active-grey
$btn-light-active-bdc = $color-active-grey
/// outline
$btn-outline-color = $color-grey
$btn-outline-bgc = none
$btn-outline-bdc = $color-grey
$btn-outline-active-bgc = $color-grey-opacity
$btn-outline-active-bdc = $color-grey
/// outline-primary
$btn-outline-primary-color = $color-orange
$btn-outline-primary-bgc = none
$btn-outline-primary-bdc = $color-orange
$btn-outline-primary-active-bgc = $color-orange-opacity
$btn-outline-primary-active-bdc = $color-dark-orange

// checkbox
$checkbox-color = $color-grey
$checkbox-bgc = $color-white
$checkbox-icon-color = $color-light-grey-s
$checkbox-icon-bgc = $color-white
/// checked
$checkbox-checked-icon-color = $color-orange
$checkbox-checked-icon-bgc = $color-white
/// disabled
$checkbox-disabled-icon-color = $color-light-grey-ss
$checkbox-disabled-icon-bgc = $color-light-grey-ss

// checkbox-group
$checkbox-group-horizontal-bdc = $color-light-grey-s

// dialog
$dialog-color = $color-grey
$dialog-bgc = $color-white
$dialog-icon-color = $color-regular-blue
$dialog-icon-bgc = $color-background
$dialog-title-color = $color-dark-grey
$dialog-close-color = $color-light-grey
$dialog-btn-color = $color-light-grey
$dialog-btn-bgc = $color-white
$dialog-btn-active-bgc = $$color-light-grey-opacity
$dialog-btn-highlight-color = $color-orange
$dialog-btn-highlight-active-bgc = $color-light-orange-opacity
$dialog-btn-disabled-color = $color-light-grey
$dialog-btn-disabled-active-bgc = transparent
$dialog-btns-split-color = $color-row-line

// index-list
$index-list-bgc = $color-white
$index-list-box-shadow = 0 3px 6px $color-light-grey-ss
$index-list-title-color = $color-dark-grey
$index-list-anchor-color = $color-light-grey
$index-list-anchor-bgc = #f7f7f7
$index-list-item-color = $color-dark-grey
$index-list-item-active-bgc = $color-light-grey-opacity
$index-list-nav-color = $color-grey
$index-list-nav-active-color = $color-orange

// loading

// picker
$picker-bgc = $color-white
$picker-title-color = $color-dark-grey
$picker-confirm-btn-color = $color-orange
$picker-confirm-btn-active-color = $color-light-orange
$picker-cancel-btn-color = $color-light-grey
$picker-cancel-btn-active-color = $color-light-grey-s
$picker-item-color = $color-dark-grey

// popup
$popup-mask-bgc = $color-mask-bg

// scroll

// slide
$slide-dot-bgc = $color-light-grey-s
$slide-dot-active-bgc = $color-orange

// time-picker

// tip
$tip-color = $color-white
$tip-bgc = $color-dark-grey-opacity

// toast
$toast-color = $color-light-grey-s
$toast-bgc = rgba(37, 38, 45, 0.9)
